<script setup>
import {ref, onMounted} from 'vue'
import {message} from 'HeyUI'

let map = null;
let marker, defaultGeocoder
//通过params获取 对话框open方法传入的参数
const {params, dialog} = defineProps({
  params: Object,
  dialog: Object
})

const lngLat = ref(params.lngLat)
const address = ref(params.address)
const suggests = ref([])


const onMapInit = ((AMap, _map, unload) => {
  console.log(AMap)
  map = _map
  marker = new AMap.Marker({})
  defaultGeocoder = new AMap.Geocoder({
    city: '全国',// city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
    radius: 200,
    batch: false,
    extensions: 'all'
  })
  if (lngLat.value) {
    searchLocation()
  } else if (address.value) {
    searchAddress()
  }
  //map.add(marker);
  if (lngLat.value) {
    marker.setPosition(lngLat.value.split(","))
    marker.setMap(map)
  }
  const clickHandler=function (ev) {
    // 触发事件的对象
    let target = ev.target;
    // 触发事件的地理坐标，AMap.LngLat 类型
    let lnglat = ev.lnglat;
    // 触发事件的像素坐标，AMap.Pixel 类型
    let pixel = ev.pixel;
    // 触发事件类型
    let type = ev.type;
    lngLat.value = lnglat.lng + ',' + lnglat.lat
    marker.setPosition([lnglat.lng, lnglat.lat])
    marker.setMap(map)
    defaultGeocoder.getAddress([lnglat.lng, lnglat.lat], function (status, ret) {
      if (status == 'complete') {
        address.value = ret.regeocode.formattedAddress
        suggests.value = ret.regeocode.pois
      }
    })
  }
  map.on('click',clickHandler);
  //注销事件
  unload( _ =>{
    map.off('click',clickHandler)
    map = null
  })
})

function selectPoi(item) {
  for (let it of suggests.value) {
    it.selected = false
  }
  item.selected = true
  const location = [item.location.lng, item.location.lat]
  lngLat.value = location.join(',')
  marker.setMap(map)
  marker.setPosition(location)
  map.setCenter(location)
  const geocoder = new AMap.Geocoder({
    city: '全国',// city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
    radius: 50,
    batch: false,
    extensions: 'base'
  })
  geocoder.getAddress(location, function (status, ret) {
    if (status == 'complete') {
      address.value = ret.regeocode.formattedAddress
    }
  })
}

function searchAddress() {
  if (!address.value) {
    //message('地址不能为空');
    return
  }

  let placeSearch = new AMap.PlaceSearch({
    pageSize:20
  })
  placeSearch.search(address.value, function (stats, ret) {
   // console.log(ret)
    suggests.value = ret.poiList.pois
  })

}

function searchLocation() {
  if (!lngLat.value) {
   // message('经纬度不能为空');
    return
  }
  let location = lngLat.value.split(",")
  if (location.length != 2) {
    message('经纬度格式错误');
    return
  }
  defaultGeocoder.getAddress(location, function (status, ret) {
    if (status == 'complete') {
      suggests.value = ret.regeocode.pois
    }
  })
}

dialog.onSubmit(() => {
  dialog.success({address: address.value, lngLat: lngLat.value})
})
const plugins = ["AMap.PlaceSearch",'AMap.Geocoder']
</script>
<template>
  <div style="width: 700px;height: 100%;display: flex;flex-direction: column;">
    <div style="display: flex;margin-bottom: 10px">
      <Search placeholder="请输入地址" style="width: 485px;margin-right: 8px;" @search="searchAddress" v-model="address" showSearchButton> <i class="h-icon-search" /></Search>
      <Search placeholder="请输入经纬度" style="width: 485px;margin-right: 8px;" @search="searchLocation" v-model="lngLat" showSearchButton> <i class="h-icon-search" /></Search>
    </div>
    <div style="flex:1;overflow: hidden;height: 100%;position: relative;border: 1px solid #eeeeee;">
      <div style="display: flex;height: 100%;">
        <AMap :plugins="plugins" @init="onMapInit" style="width:500px; height:100%"/>
        <ul class="h-list">
          <li v-for="item in suggests" @click="selectPoi(item)">
            <div style="display: flex;align-items: center;text-align: center;">
              <div style="width: 40px">
                <Icon type="h-icon-location"/>
              </div>
              <div style="flex: 1;text-align: left;">
                <div style="font-weight: 500">{{ item.name }}</div>
                <div style="font-size: 14px;color:#999">{{ item.address }}</div>
              </div>
              <div style="width: 40px">
                <Icon v-if="item.selected" type="h-icon-check" color="#409eff"/>
              </div>
            </div>
          </li>
          <div  v-if="suggests.length==0" class="h-table-content-empty"><div>暂无数据</div></div>
        </ul>
      </div>
    </div>
  </div>

</template>
<style scoped>
.map-input-panel > div {
  margin-bottom: 8px;
}

.h-list {
  overflow: auto;
  height: 100%;
  left: 10px;
  top: 10px;
  width: 200px;
}

.h-list > li {
  list-style-type: none;
  border-bottom: 1px solid #eeeeee;
  padding: 5px 0;
}

.h-list > li:hover {
  background-color: #f5f7fa;
}
</style>
